<style>
.welcome {}
.welcome .title		{font-size:24px; font-family:微软雅黑,黑体,宋体; font-weight: bold; }

.welcome .install {}
.welcome .install .btn	{font-size:14px; display:inline-block; padding:5px 20px; margin:0 20px 0 0; background-color:#395; color:#FFF; border-width:2px; border-style:solid; border-color:#FFF #666 #666 #FFF;}
.welcome .install .link	{font-size:14px; padding:5px 10px; margin:0; color:#0066AA; border-width:1px; border-style:dotted; border-color:#CCC; background-color:#F5F5F5; text-decoration:underline; font-weight:bold;}
.welcome .install a 	{font-size:12px;  color:#0066AA; margin:0 10px; text-decoration:underline;}
.welcome .install span 	{font-size:12px;  color:#0066AA; margin:0 10px;}
.welcome .install .msg	{display:inline-block; font-size:14px; border:1px dotted #0066AA; color:#0066AA; background-color:#DEF; padding:5px 20px; text-decoration:none;}
.welcome .install .red	{display:inline-block; font-size:14px; border:1px dotted #990000; color:#FF0000; background-color:#FEE; padding:5px 20px; text-decoration:none;}
.welcome .install .green{display:inline-block; font-size:14px; border:1px dotted #006600; color:#009900; background-color:#EFE; padding:5px 20px; text-decoration:none;}
.welcome .img 		{text-align:center;}
.welcome .img img 	{border:1px solid #CCC; margin-bottom:10px;}

.arrow_blue_down_on { display: inline-block; background-image: url(/images/arrow_blue_down.png); background-position: center bottom; background-repeat: no-repeat; }
.arrow_blue_down_on a {display:block; color: #FFF; padding: 5px 10px; background-color: #0066AA; margin:0 0 7px 0; }
.arrow_blue_down_off { display: inline-block;}
.arrow_blue_down_off a {display:block; color: #0066AA; padding: 5px 10px; margin:0 0 7px 0; }
</style>

<div id="tips_ext_div" class="popup" style="position:absolute; width:800px;">
	<div class="header">
		<i class="icon_w icon_circle"></i>
		uReadMe网文摘手
		<i class="icon_w icon_close" style="float:right; cursor:pointer;" onclick="UM_LAYER.close();"></i>
	</div>
	<div class="content clearfix" style="padding:20px 40px 50px 40px;">
		<div id="tips_ext_ie" class="welcome" style="display:none;">
			<div class="title">
				如何保存文章到阅读圈？
			</div>
			<div style="padding:20px 0 0 40px;">
				<li style="font-size: 16px; font-family:微软雅黑,黑体,宋体;  margin-bottom: 15px; color:#777;">把上网时发现的好文章、好图片，保存到阅读圈中</li>
				<li style="font-size: 16px; font-family:微软雅黑,黑体,宋体;  margin-bottom: 15px; color:#777;">点名推荐给好友，与好友共同分享 :D</li>
			</div>
			<div class="install" style="padding:20px 0 30px 40px;">
				右键点此链接
				<a class="link" href="javascript:void(function(d,b){(typeof(UM_OB)=='object'&&typeof(UM_OB.opn)=='function')?UM_OB.opn():(b=d.createElement('script'),b.setAttribute('charset','utf-8'),b.src='http://uread.me/js/ie.js?'+Math.floor(+new Date/1E7),d.body.appendChild(b))}(document))" onclick="alert('右键点击此链接，选择“添加到收藏夹”或直接拖动此链接到收藏夹栏。'); return false;">uReadMe网文摘手</a>
				然后选择“添加到收藏夹”
			</div>
			<script type="text/javascript">
				function ie_click (t, s) {
					$('#ie_btn div').attr('class', 'arrow_blue_down_off');
					$(s).parent().attr('class', 'arrow_blue_down_on');
					$('#ie_img img').hide();
					$('#ie9_'+t).slideDown("normal");
				}
			</script>
			<div id="ie_btn" style="text-align: center;">
				<div class="arrow_blue_down_on"><a onclick="ie_click(1, this);">1、添加到收藏夹</a></div>
				<div class="arrow_blue_down_off"><a onclick="ie_click(2, this);">2、显示收藏夹栏</a></div>
				<div class="arrow_blue_down_off"><a onclick="ie_click(3, this);">3、显示“网文摘手”</a></div>
				<div class="arrow_blue_down_off"><a onclick="ie_click(4, this);">4、安装完成</a></div>
				<div class="arrow_blue_down_off"><a onclick="ie_click(5, this);">5、如何使用</a></div>
			</div>
			<div id="ie_img" class="img">
				<img id="ie9_1" src="/images/ext_ie9_1.gif" width="640">
				<img id="ie9_2" src="/images/ext_ie9_2.gif" width="640" style="display:none;">
				<img id="ie9_3" src="/images/ext_ie9_3.gif" width="640" style="display:none;">
				<img id="ie9_4" src="/images/ext_ie9_4.gif" width="640" style="display:none;">
				<img id="ie9_5" src="/images/ext_ie9_5.gif" width="640" style="display:none;">
			</div>
		</div>
		
		<div id="tips_ext_ff" class="welcome" style="display:none;">
			<div class="title">
				如何保存文章到阅读圈？
			</div>
			<div style="padding:20px 0 0 40px;">
				<li style="font-size: 16px; font-family:微软雅黑,黑体,宋体;  margin-bottom: 15px; color:#777;">把上网时发现的好文章、好图片，保存到阅读圈中</li>
				<li style="font-size: 16px; font-family:微软雅黑,黑体,宋体;  margin-bottom: 15px; color:#777;">点名推荐给好友，与好友共同分享 :D</li>
			</div>
			<div class="install" style="padding:20px 0 20px 40px;">
				<a class="btn" href="https://addons.mozilla.org/zh-CN/firefox/addon/ureadme/" target="_blank">点击此处安装【uReadMe网文摘手】(火狐浏览器扩展)</a>
			</div>
			<script type="text/javascript">
				function ff_click (t, s) {
					$('#ff_btn div').attr('class', 'arrow_blue_down_off');
					$(s).parent().attr('class', 'arrow_blue_down_on');
					$('#ff_img img').hide();
					if (t == 1) {
						$('#ff_1').slideDown("normal");
					} else if (t == 2) {
						$('#ff_2').slideDown("normal", function () {$('#ff_3').slideDown("normal")} );
					}
				}
			</script>
			<div id="ff_btn" style="text-align: center;">
				<div class="arrow_blue_down_on"><a onclick="ff_click(1, this);">安装完成的样子</a></div>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<div class="arrow_blue_down_off"><a onclick="ff_click(2, this);">安装后看不到按钮？点击这里</a></div>
			</div>
			<div id="ff_img" class="img">
				<img id="ff_1" src="/images/ext_ff_1.gif" width="640">
				<img id="ff_2" src="/images/ext_ff_2.gif" width="640" style="display:none;">
				<img id="ff_3" src="/images/ext_ff_3.gif" width="640" style="display:none;">
			</div>
		</div>
		
		<div id="tips_ext_cr" class="welcome" style="display:none;">
			<div class="title">
				如何保存文章到阅读圈？
			</div>
			<div style="padding:20px 0 0 40px;">
				<li style="font-size: 16px; font-family:微软雅黑,黑体,宋体;  margin-bottom: 15px; color:#777;">把上网时发现的好文章、好图片，保存到阅读圈中</li>
				<li style="font-size: 16px; font-family:微软雅黑,黑体,宋体;  margin-bottom: 15px; color:#777;">点名推荐给好友，与好友共同分享 :D</li>
			</div>
			<div id="chrome_install_store" class="install" style="padding:20px 0 20px 40px;">
				<div id="chrome_install_msg" style="margin-bottom:20px;">
					<a id="chrome_install_btn" class="btn" onclick="chrome_inline_install();">点击此处安装【uReadMe网文摘手】(谷歌浏览器扩展)</a>
				</div>
				<div class="img">
					<img src="/images/ext_cr_1.gif" >
				</div>
			</div>
			<div id="chrome_install_local" style="display:none; border:1px solid red; padding:20px 30px; background-color: #FFE; font-size: 14px;">
				无法连接到谷歌商店进行安装！<br><br>
				如果您能够连接到谷歌商店，请直接访问这里：<br>
				<a href="https://chrome.google.com/webstore/detail/ureadme/bofkfmjmhedbbcamfbmahmgbcaabjidh" target="_blank">https://chrome.google.com/webstore/detail/ureadme/bofkfmjmhedbbcamfbmahmgbcaabjidh</a>
				<br><br>
				否则<a href="/extension/chrome/ureadme.crx" style="font-size:14px; margin:0 10px; text-decoration: underline;">请点击这里进行下载后安装</a>步骤如下：
				<br><br>
				<script type="text/javascript">
					function cr_click (t, s) {
						$('#cr_btn div').attr('class', 'arrow_blue_down_off');
						$(s).parent().attr('class', 'arrow_blue_down_on');
						$('#cr_img img').hide();
						$('#cr_'+t).slideDown("normal");
					}
				</script>
				<div id="cr_btn" style="text-align: center;">
					<div class="arrow_blue_down_on"><a onclick="cr_click(1, this);">1、下载扩展程序文件</a></div>
					<div class="arrow_blue_down_off"><a onclick="cr_click(2, this);">2、点击设置，选择工具 > 扩展程序。</a></div>
					<div class="arrow_blue_down_off"><a onclick="cr_click(3, this);">3、将扩展程序拖到“扩展程序”页。</a></div>
				</div>
				<div id="cr_img" class="img">
					<img id="cr_1" src="/images/ext_cr_local_1.gif" width="640">
					<img id="cr_2" src="/images/ext_cr_local_2.gif" width="640" style="display:none;">
					<img id="cr_3" src="/images/ext_cr_local_3.gif" width="640" style="display:none;">
				</div>

			</div>
		</div>
	</div>
</div>
<script language="javascript" type="text/javascript">
new function () {
	var d = $('#tips_ext_div');
	d.offset({ top: 50, left: ($(document).width() - d.width())/2 });
	
	if ($.browser.msie) {
		$('#tips_ext_ie').show();
	} else if ($.browser.mozilla) {
		$('#tips_ext_ff').show();
	} else if ($.browser.chrome) {
		$('#tips_ext_cr').show();
	} else if ($.browser.opera) {
		$('#tips_ext_cr').show();
	} else if ($.browser.safari) {
		$('#tips_ext_cr').show();
	} else if ($.browser.webkit) {
		$('#tips_ext_cr').show();
	} else {
		$('#tips_ext_ie').show();
	}
};
</script>


<script type="text/javascript">
function chrome_inline_install () {
	var ob = $('#chrome_install_msg');
	ob.html('<span class="msg">正在连接谷歌商店，可能会有点慢...</span>');
	chrome.webstore.install(
		'', 
		function () { 
			ob.html('<span class="green">安装成功</span>');
		}, 
		function () { 
			$('#chrome_install_store').fadeOut("fast", function(){$('#chrome_install_local').fadeIn("fast");} )
		}  
	);
}
</script>